<template>
  <view class='goods-cart-address-box' @click="shutDown">
    <view class="bottomMenu-box-content">
      <view class="bottomMenu-box-content-body" @click.stop="">

        <!-- 标题 -->
        <view class="goods-cart-address-title"> 配送地址 </view>
        <!-- 配送详细信息 -->
        <view class="goods-cart-address-info">
          <!-- 默认地址 -->
          <view class="goods-cart-address-content" @click="chooseAddress(goodsStore.defaultAddress)">
            <image src="../images/yes.png" mode="scaleToFill" />
            <view style="width: 700rpx;">
              <view class="goods-cart-address-content-detail">
                {{ goodsStore.defaultAddress.address_province + goodsStore.defaultAddress.address_city +
                  goodsStore.defaultAddress.address_county + goodsStore.defaultAddress.address_town }}
              </view>
              <view class="goods-cart-address-content-city">{{ goodsStore.defaultAddress.address_street }}</view>
            </view>
          </view>
          <!-- 其他地址 -->
          <view class="goods-cart-address-content" v-for="(item) in nowAddress" :key="item.address_id"
            @click="chooseAddress(item)">
            <image src="../images/address.png" mode="scaleToFill" />
            <view style="width: 700rpx;">
              <view class="goods-cart-address-content-detail">
                {{ item.address_province + item.address_city + item.address_county + item.address_town }}
              </view>
              <view class="goods-cart-address-content-city">{{ item.address_street }}</view>
            </view>
          </view>
        </view>

        <view @click.stop="shutDown" class="goods-cart-address">新增地址</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { DistributionAddress } from "../../../config/data/data"
import { useGoodsStore } from "../../../pinia/goods"
import { onMounted, defineEmits, defineProps, ref, computed } from "vue"

//全局状态
const goodsStore = useGoodsStore();

//关闭事件
const emit = defineEmits(['shutDown', "chooseAddress"])

//配送地址
const props = defineProps<{ addressList: DistributionAddress[] }>()

//关闭菜单栏
const shutDown = () => {
  emit('shutDown', '')
}

//将选中的地址放置第一个
const nowAddress = computed(() => {
  return props.addressList.filter(item => item.address_id != goodsStore.defaultAddress.address_id)
})

//选中地址事件
const chooseAddress = (item: DistributionAddress) => {
  if (goodsStore.defaultAddress.address_id != item.address_id) {
    emit('chooseAddress', item)
  }
  emit('shutDown', '')
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {

});
// 组件周期函数--监听组件数据更新之前
// beforeUpdate() {},
// // 组件周期函数--监听组件数据更新之后
// updated() {},
// // 组件周期函数--监听组件激活(显示)
// activated() {},
// // 组件周期函数--监听组件停用(隐藏)
// deactivated() {},
// // 组件周期函数--监听组件销毁之前
// beforeDestroy() {},

</script>

<style scoped lang="scss">
.goods-cart-address-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0d0d0da8;
  z-index: 10;
  display: flex;
  justify-content: center;
  transition: all .2s;
  animation: backBox .3s ease-in-out 0s 1 forwards;



  .bottomMenu-box-content {
    height: 100vh;
    width: 100%;
    position: relative;


    .bottomMenu-box-content-body {
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      min-height: 50vh;
      max-height: 90vh;
      display: flex;

      align-items: center;
      flex-direction: column;
      background-color: $uni-box-color;
      animation: identifier .2s ease-in-out 0s 1 forwards;

      .goods-cart-address-title {
        width: 100%;
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
      }

      .goods-cart-address-info {
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-bottom: 30rpx;

        .goods-cart-address-content {
          display: flex;
          align-items: center;
          padding: 20rpx;
          margin: 10rpx 0;
          letter-spacing: 2rpx;

          image {
            width: 30rpx;
            height: 30rpx;
            margin-right: 15rpx;
          }

          .goods-cart-address-content-detail {
            font-size: 30rpx;
            font-weight: bolder;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .goods-cart-address-content-city {
            font-size: 25rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }


    }

    .goods-cart-address {
      width: 90%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      color: $uni-box-color;
      margin: 20rpx 0;
      margin-top: auto;
      background-color: red;

      &:hover {
        opacity: .8;
      }
    }
  }

}


@keyframes identifier {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0);
  }

}


@keyframes backBox {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>